﻿<template>
  <div>
    <!-- 标题部分 -->
    <V-Title :titleName = 'titleName'></V-Title>
    <div class = 'page_mainContent'>
      <!-- 表格部分 -->
      <div class = 'page_tableContent'>
        <el-table :data = 'tableData' style = 'width:100%' stripe border>
          <el-table-column align = 'center' v-for='(item) in tableColumn' :key = 'item.indexName' :label = 'item.text'>
            <template slot-scope = 'scope'>
              <span>{{scope.row[item.indexName]}}</span>
            </template>
          </el-table-column>
          <el-table-column label = "操作" align = "center" width = '260px'>
            <template slot-scope="scope">
              <el-button type='text' @click="handleEdit(scope.row)"><i class='iconfont icon-bianji'></i>编辑</el-button>
              <el-button type='text' @click="handleDelete(scope.row)"><i class='iconfont icon-shanchu'></i>删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 底部按钮和页码部分 -->
      <div class='page_bottomContent'>
        <div class='page_btnsContent'>
          <el-button type="primary" @click='handleAdd ()'>添加角色</el-button>
        </div>
      </div>
    </div>
    <!-- 编辑和修改角色的弹窗 -->
    <el-dialog v-drag :title = 'dialogTitle' :visible.sync = 'dialogFormVisible' width = '40%' @close = "closeDialog"
    :close-on-click-modal = 'false'>
      <el-form :model = "ruleForm" ref = "ruleForm" :label-width = 'labelWidth' :rules = 'rules'>
        <el-form-item label = "角色编号：" prop = 'roleNo'>
          <el-input v-model = 'ruleForm.roleNo' placeholder = "请输入角色编号" :disabled = "isEdit"></el-input>
        </el-form-item>
        <el-form-item label = '角色名称：' prop = 'roleName'>
          <el-input v-model = 'ruleForm.roleName' placeholder="请输入角色名称"></el-input>
        </el-form-item>
        <el-form-item class = 'form_noLeftMargin'>
          <el-button type="info" @click = "resetForm ('ruleForm')">取 消</el-button>
          <el-button type="primary" @click = "submitForm ('ruleForm', isEdit)">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import VTitle from '@/components/common/MainTitle.vue'
export default {
  data () {
    return {
      titleName: '角色管理',
      tableData: [],
      tableColumn: [
        {
          text: '角色编号',
          indexName: 'roleno'
        },
        {
          text: '角色名称',
          indexName: 'rolename'
        }
      ],
      dialogTitle: '',
      dialogFormVisible: false,
      ruleForm: {
        roleNo: '',
        roleName: ''
      },
      labelWidth: '94px',
      isEdit: '',
      rules: {
        roleNo: [
          {required: true, message: '角色编号不能为空', trigger: 'blur'}
        ],
        roleName: [
          {required: true, message: '角色名称不能为空', trigger: 'blur'}
        ]
      }
    }
  },
  created () {
    this.getTableData()
  },
  methods: {
    getTableData () {
      this.$get('/role').then((data) => {
        if (data.status === 200) {
          this.tableData = []
          data.data.result.forEach(item => {
            if (this.$store.state.roleNo && this.$store.state.roleNo.indexOf('R999') !== -1) {
              this.tableData.push(item)
            } else {
              // 不展示超级管理员的角色
              if (item.roleno !== 'R999') {
                this.tableData.push(item)
              }
            }
          })
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    // 添加角色
    handleAdd () {
      this.dialogFormVisible = true
      this.dialogTitle = '添加角色'
      this.ruleForm.roleNo = ''
      this.ruleForm.roleName = ''
      this.isEdit = false
    },
    // 编辑角色
    handleEdit (row) {
      this.dialogFormVisible = true
      this.dialogTitle = '编辑角色信息'
      this.ruleForm.roleNo = row.roleno
      this.ruleForm.roleName = row.rolename
      this.isEdit = true
    },
    // 删除角色信息
    handleDelete (row) {
      if (row.roleno === 'R999') {
        this.$message({
          message: '超级管理员角色不能删除',
          type: 'warning'
        })
      } else {
        this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          cancelButtonClass: 'el-button--info'
        }).then(() => {
          this.$delete('/role/' + row.roleno).then((data) => {
            if (data.status === 204) {
              this.$message({
                message: '删除成功',
                type: 'success'
              })
              this.getTableData()
            }
          }).catch((error) => {
            if (error.response.status === 404) {
              this.$message.error('删除失败，请重试！')
            }
          })
        }).catch(() => {})
      }
    },
    // 提交编辑的方法
    submitEdit () {
      this.$patch('/role/' + this.ruleForm.roleNo, {
        role_name: this.ruleForm.roleName
      }).then((data) => {
        if (data.data.result.code === 'success') {
          this.dialogFormVisible = false
          this.$message({
            message: '编辑成功',
            type: 'success'
          })
          this.getTableData()
        } else {
          this.$message.error(data.data.result.msg)
        }
      })
    },
    // 提交新增的方法
    submitAdd () {
      this.$post('/role', {
        role_no: this.ruleForm.roleNo,
        role_name: this.ruleForm.roleName
      }).then((data) => {
        if (data.data.result.code === 'success') {
          this.dialogFormVisible = false
          this.$message({
            message: '添加成功',
            type: 'success'
          })
          this.getTableData()
        } else {
          this.$message.error(data.data.result.msg)
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    // 点击弹窗的确定按钮
    submitForm (forms, submitType) {
      this.$refs[forms].validate((valid) => {
        if (valid) {
          if (submitType) {
            this.submitEdit()
          } else {
            this.submitAdd()
          }
        } else {
          return false
        }
      })
    },
    // 点击弹窗的取消按钮
    resetForm (forms) {
      this.$refs[forms].resetFields()
      this.dialogFormVisible = false
    },
    closeDialog () {
      this.$refs.ruleForm.clearValidate()
    }
  },
  components: {
    VTitle
  }
}
</script>
